<template>
    <div class="layout">
        <div class="layout-left">
            <poster-settings
                ref="posterSettingsRefs"
                v-model="formData.poster"
                :disabled="pageType == 'look'"
                default-url="https://static.scrm.keyid.cn/assets/images/web-pc/default-envelopesfission-poster.png" />
        </div>
        <div class="phone">
            <poster-phone
                ref="activityPhoneRef"
                v-model:url="formData.poster.absolute_url"
                class="poster-phone"
                :disabled="pageType == 'look'"
                :poster-head="formData.poster.avatar_type"
                :poster-head-switch="formData.poster.avatar_flag"
                :poster-nickname-color="formData.poster.nickname_color"
                :poster-nickname-size="formData.poster.nickname_size"
                :poster-nickname-switch="formData.poster.nickname_flag"
                :poster-desc-color="formData.poster.desc_color"
                :poster-desc-switch="formData.poster.desc_flag"
                :poster-desc-content="formData.poster.desc"
                :poster-desc-size="formData.poster.desc_size">
            </poster-phone>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, defineExpose, reactive } from 'vue';
import PosterSettings from '@/components/zw/activity/poster-settings/index.vue';
import PosterPhone from '@/components/zw/phonePreview1.0/activityPhonePreview/posterPhone/index.vue';
import { useRoute } from 'vue-router';
const route = useRoute();

const pageType = route.query.type;

const activityPhoneRef = ref<any>(null);
const formData = ref({
    // 旧字段
    poster: {
        poster_type: 0, //0: 默认海报， 1: 海报库， 2: 本地上传
        poster_id: undefined, //海报库中海报id
        absolute_url: 'https://static.scrm.keyid.cn/assets/images/web-pc/default-envelopesfission-poster.png', //海报图片url
        poster_absolute_url: '', // 海报库中海报url
        local_absolute_url: '', // 本地海报上传url
        avatar_flag: 1, //是否用户头像 1: 打开， 2: 关闭
        avatar_type: 1, //头像展示类型  1: 圆形, 2: 方形
        nickname_flag: 1, //是否用户昵称  1: 打开， 2: 关闭
        nickname_color: '#ffffff', //用户昵称颜色
        nickname_size: 14, //用户昵称字体大小
        desc_flag: 1, //是否描述 1: 打开， 2: 关闭
        desc_color: '#ffffff', //描述颜色
        desc_size: 12, //描述字体大小
        desc: '' //描述内容
    }
});

const formRef = reactive({
    poster_type: [{ required: true, message: '请选择海报', trigger: 'blur' }]
});

const setPosition = (val: any) => {
    activityPhoneRef.value.formData.position = val;
};
const getPostersInfo = () => {
    return activityPhoneRef.value.formData;
};
defineExpose({
    formData,
    formRef,
    getPostersInfo,
    setPosition
});
</script>
<style scoped lang="scss">
.layout {
    display: flex;

    // padding-top: 20px;
    background-color: #fff;

    .layout-left {
        flex: auto;
    }

    .phone {
        flex: 1;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        box-sizing: border-box;
    }
}
</style>
